<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <!-- 引入 echarts.js -->

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script>
        $(function () {
            url1 = "/clazz/clazzDo";
            $.get(url1,"",function (data){
                if(data.result){
                    var htmldata1 = "<option name='cid' value='-1' >蜗牛校区</option>";
                    $.each(data.clazzList,function(index,clazz){
                        htmldata1 = htmldata1 + "<option name='cid' value="+clazz.cid+" >"+clazz.cname+"</option>";
                    })
                    $("#option").html(htmldata1);

                }
            })
            // 学生男女比例
            select();
            //学生来源比例
            // selectresource();
        })
     // function select(){
     //     url2 = "/permission/radione";
     //     var parm = $("#option").val();
     //     if(parm == null){parm = -1;}
     //     $.get(url2,"cid="+parm,function (data){
     //         if(data.result){
     //             boy = data.clazz.boy;
     //             gril = data.clazz.gril;
     //             var htmldata2 = "<tb>"+data.clazz.cname+"</tb><tb>"+data.clazz.boy+"</tb><tb>"+data.clazz.gril+"</tb><tb>"+data.clazz.boy/(data.clazz.boy+data.clazz.gril)*100+"%</tb><tb>"+data.clazz.gril/(data.clazz.boy+data.clazz.gril)*100+"%</tb>";
     //             $("#tbody").html(htmldata2);
     //         }
     //     })
     // }
        // 学生男女比例
        function select(){
            url2 = "/permission/radione";
            var parm = $("#option").val();
            if(parm == null){parm = -1;}
            $.get(url2,"cid="+parm,function (data){
                if(data.result){
                    boy = data.clazz.boy;
                    gril = data.clazz.gril;
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '男女分布',
                            // subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            data: ['boy','gril']
                        },
                        series: [
                            {
                                name: '学生',
                                type: 'pie',
                                radius: ['50%', '75%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                // labelLine: {
                                //     show: false
                                // },
                                data: []
                            }
                        ]
                    };
                    option.series[0].data.push({value:boy,name:'boy'},{value:gril,name:'gril'})
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })
            // 学生来源比例
            selectresource();
        }

        //学生来源比例
        function selectresource(){
            url2 = "/permission/radioresourceDo";
            var parm = $("#option").val();
            if(parm == null){parm = -1;}
            $.get(url2,"cid="+parm,function (data){
                if(data.result){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main2'));
                    option = {
                        title: {
                            text: '生源分布',
                            // subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            left: 80,
                            top: 'bottom',
                            data: []
                        },
                        // toolbox: {
                        //     show: true,
                        //     feature: {
                        //         mark: {show: true},
                        //         dataView: {show: true, readOnly: false},
                        //         magicType: {
                        //             show: true,
                        //             type: ['pie', 'funnel']
                        //         },
                        //         restore: {show: true},
                        //         saveAsImage: {show: true}
                        //     }
                        // },
                        series: [
                            {
                                name: '学生来源',
                                type: 'pie',
                                radius: [40, 115],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                data: []
                            },
                        ]
                    };
                    $.each(data.studentresourceList,function(index,studentresource){
                        option.series[0].data.push({value:studentresource.count,name:studentresource.resource});
                        option.legend.data.push(studentresource.resource);
                    })
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    //学生来源比例
                }
            })
        }

     // function selectAll(){
     //    url="/permission/radioAll"
     //     $.get(url,"",function (data){
     //         if(data.result){
     //            var htmldata = "";
     //             $.each(data.clazzList,function(index,clazz) {
     //                 htmldata=htmldata+"<tb>"+clazz.cname+"</tb><tb>"+clazz.boy+"</tb><tb>"+clazz.gril+"</tb><tb>"+clazz.boy/(clazz.boy+clazz.gril)*100+"%</tb><tb>"+clazz.gril/(clazz.boy+clazz.gril)*100+"%</tb><br/><br/>"
     //             })
     //             $("#tbody2").html(htmldata);
     //         }
     //     })
     // }

        //页面跳转
        function selectAll(){
           url3="/permission/selectstuAll"
            $.get(url3,"",function (data){
                if(data.result){
                   window.location.href="/permission/lineju"
                }
            })
        }
    </script>
</head>
<body>


    <div class="col-sm-10 col-sm-offset-5 col-md-10 col-md-offset-1 main">
        <div class="panel panel-default">
            <div class="panel-body">
                    <div class="form-group has-feedback">
<!--                        班级下拉框-->
                        <select id="option" class="form-control" style="width: 200px">
                        </select>
                        <button type="button" class="btn btn-warning" id="btnSearch" onclick="select()"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                        <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;" id="btnDelSelected" onclick="selectAll()"><i class=" glyphicon "></i> 更多...</button>
                    </div>
                    <br>
            </div>
        </div>
    </div>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 500px;height:300px;float:left"></div>
    <div id="main2" style="width: 600px;height:300px;float:left"></div>

</body>
</html>